<template>
  <div>
    <van-nav-bar>
      <template #title>
        <div>洛阳钓场</div>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="yup()"/>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div v-for="(ingd,index) in uop" :key="index" class="aa2" @click="apo(ingd.id)">
     <div>
         <img :src="ingd.picturePath" alt="" class="aa1">
     </div>
     <div>
         <div><h2>{{ingd.name}}</h2></div>
         <div class="aa3">
             <div>{{ingd.summary}}</div>
             <div>{{ingd.distance}}</div>
         </div>
         <div>
             <div>{{ingd.chargeType}}</div>
             <div>简介：{{ingd.summary}}</div>
         </div>
     </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      uop:[]
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    apo(id){
    this.$router.push({
        name:'钓场详情',
        query:{
            du:id
        }
    })
    },
    yup(){
      this.$router.push({
        name:'首页',
      })
    }
  },
  mounted() {
      axios.post('/api/cfishingponds',{}).then(res=>{
          console.log(res.data.data)
          this.uop = res.data.data
      })
  },
};
</script>/
<style scoped>
.aa1{
    width: 15rem;
    height: 8rem;
}
.aa2{
    display: flex;
    margin-top: 2rem;
}
.aa3{
    margin-bottom: 1rem;
    margin-top: 1rem;
}
</style>